import React, { useEffect, useRef } from "react";
import * as echarts from "echarts"; //引入图表
import { Space, Table, Tag } from "antd";
function Index() {
  const chartRef = useRef(null);
  const chartRef1 = useRef(null);
  const chartRef2 = useRef(null);
  const chartRef3 = useRef(null);
  const chartRef4 = useRef(null);
  const chartRef5 = useRef(null);
  useEffect(() => {
    const myChart = echarts.init(chartRef.current);

    const option = {
      title: {
        text: "访问总人数",
        left: "1%",
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
      },
      yAxis: {
        type: "value",
        boundaryGap: [0, "30%"],
      },
      visualMap: {
        type: "piecewise",
        show: false,
        dimension: 0,
        seriesIndex: 0,
        pieces: [
          {
            gt: 1,
            lt: 3,
            color: "rgba(0, 0, 180, 0.4)",
          },
          {
            gt: 5,
            lt: 7,
            color: "rgba(0, 0, 180, 0.4)",
          },
        ],
      },
      series: [
        {
          type: "line",
          smooth: 0.6,
          symbol: "none",
          lineStyle: {
            color: "#5470C6",
            width: 5,
          },
          markLine: {
            symbol: ["none", "none"],
            label: { show: false },
            data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }],
          },
          areaStyle: {},
          data: [
            ["", 100],
            ["2019-10-11", 300],
            ["2019-10-12", 450],
            ["1", 480],
            ["2019-10-14", 350],
            ["2019-10-15", 300],
            ["2", 450],
            ["2019-10-17", 400],
            ["2019-10-18", 600],
          ],
        },
      ],
    };

    myChart.setOption(option);
  }, []);
  useEffect(() => {
    const myChart = echarts.init(chartRef1.current);

    const option1 = {
      title: {
        text: "内容发布量",
        left: "1%",
      },
      xAxis: {
        type: "category",
        data: ["1", "2", "3", "4", "5", "5", "7"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: "bar",
        },
      ],
    };

    myChart.setOption(option1);
  }, []);
  useEffect(() => {
    const myChart = echarts.init(chartRef2.current);

    const option2 = {
      title: {
        text: "评论总量",
        left: "1%",
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
      },
      yAxis: {
        type: "value",
        boundaryGap: [0, "30%"],
      },
      visualMap: {
        type: "piecewise",
        show: false,
        dimension: 0,
        seriesIndex: 0,
        pieces: [
          {
            gt: 1,
            lt: 3,
            color: "rgba(0, 0, 180, 0.4)",
          },
          {
            gt: 5,
            lt: 7,
            color: "rgba(0, 0, 180, 0.4)",
          },
        ],
      },
      series: [
        {
          type: "line",
          smooth: 0.6,
          symbol: "none",
          lineStyle: {
            color: "#5470C6",
            width: 5,
          },
          markLine: {
            symbol: ["none", "none"],
            label: { show: false },
            data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }],
          },
          areaStyle: {},
          data: [
            ["", 100],
            ["2019-10-11", 300],
            ["2019-10-12", 450],
            ["1", 480],
            ["2019-10-14", 350],
            ["2019-10-15", 300],
            ["2", 450],
            ["2019-10-17", 400],
            ["2019-10-18", 600],
          ],
        },
      ],
    };

    myChart.setOption(option2);
  }, []);
  useEffect(() => {
    const myChart = echarts.init(chartRef3.current);
    const option3 = {
      title: {
        text: "分享总量",
        left: "1",
      },
      legend: {
        bottom: "5%",
        left: "center",
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["40%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 2,
          },
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1048, name: "富文本" },
            { value: 735, name: "图文类" },
            { value: 580, name: "视频类" },
          ],
        },
      ],
    };

    myChart.setOption(option3);
  }, []);
  useEffect(() => {
    const myChart = echarts.init(chartRef4.current);

    const option4 = {
      title: {
        text: "内容发布比",
        left: "1",
      },
      xAxis: {
        type: "category",
        data: [
          "0：00",
          "2：00",
          "4：00",
          "6：00",
          "8：00",
          "10：00",
          "12：00",
          "14:00",
          "16：00",
        ],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130, 800, 700],
          type: "bar",
          showBackground: true,
          backgroundStyle: {
            color: "rgba(180, 180, 180, 0.2)",
          },
        },
      ],
    };

    myChart.setOption(option4);
  }, []);
  useEffect(() => {
    const myChart = echarts.init(chartRef5.current);

    const option5 = {
      title: {
        text: "内容时段分",
        left: "1",
      },
      xAxis: {
        type: "category",
        boundaryGap: false,
      },
      yAxis: {
        type: "value",
        boundaryGap: [0, "30%"],
      },
      visualMap: {
        type: "piecewise",
        show: false,
        dimension: 0,
        seriesIndex: 0,
        pieces: [
          {
            gt: 1,
            lt: 3,
            color: "rgba(0, 0, 180, 0.4)",
          },
          {
            gt: 5,
            lt: 7,
            color: "rgba(0, 0, 180, 0.4)",
          },
        ],
      },
      series: [
        {
          type: "line",
          smooth: 0.6,
          symbol: "none",
          lineStyle: {
            color: "#5470C6",
            width: 5,
          },
          markLine: {
            symbol: ["none", "none"],
            label: { show: false },
            data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }],
          },
          areaStyle: {},
          data: [
            ["04：00", 200],
            ["05：00", 560],
            ["06：00", 750],
            ["07：00", 580],
            ["08：00", 250],
            ["09：00", 300],
            ["10：00", 450],
            ["11：00", 300],
            ["12：00", 100],
          ],
        },
      ],
    };

    myChart.setOption(option5);
  }, []);
  //实现作者热门榜渲染
  const columns = [
    {
      title: "排名",
      dataIndex: "id",
      key: "id",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "作者",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "内容量",
      dataIndex: "age",
      key: "age",
    },
    {
      title: "点击量",
      dataIndex: "address",
      key: "address",
    },
  ];
  const data = [
    {
      id: "1",
      name: "用魔法打败魔法",
      age: 1500,
      address: "32214",
    },
    {
      id: "2",
      name: "王多余",
      age: 2100,
      address: "22145",
    },
    {
      id: "3",
      name: "请叫我小李",
      age: 1800,
      address: "23567",
    },
    {
      id: "4",
      name: "Chgiristoper",
      age: 1743,
      address: "12568",
    },
  ];
  return (
    // 必须设置具体宽高！不然牛魔的图表都出不来
    //最大的盒子
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        minHeight: "100vh",
        padding: "20px",
        gap: "20px",
        background: "#f0f2f5",
      }}
    >
      {/* 第一行图表组 */}
      <div
        style={{
          display: "flex",
          gap: "20px",
          flexWrap: "wrap",
          justifyContent: "space-between",
        }}
      >
        <div
          ref={chartRef}
          style={{
            flex: "1 1 300px",
            height: "300px",
            background: "white",
            borderRadius: "8px",
            boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
            padding: "10px",
          }}
        ></div>

        <div
          ref={chartRef1}
          style={{
            flex: "1 1 300px",
            height: "300px",
            background: "white",
            borderRadius: "8px",
            boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
            padding: "10px",
          }}
        ></div>

        <div
          ref={chartRef2}
          style={{
            flex: "1 1 300px",
            height: "300px",
            background: "white",
            borderRadius: "8px",
            boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
            padding: "10px",
          }}
        ></div>

        <div
          ref={chartRef3}
          style={{
            flex: "1 1 300px",
            height: "300px",
            background: "white",
            borderRadius: "8px",
            boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
            padding: "10px",
          }}
        ></div>
      </div>

      {/* 第二行图表+表格 */}
      <div
        style={{
          display: "flex",
          gap: "20px",
          flex: "1",
          minHeight: "400px",
        }}
      >
        <div
          ref={chartRef4}
          style={{
            flex: "2",
            background: "white",
            borderRadius: "8px",
            boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
            padding: "20px",
          }}
        ></div>

        <div
          style={{
            flex: "1",
            background: "white",
            borderRadius: "8px",
            boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
            padding: "20px",
          }}
        >
          <h3 style={{ marginBottom: "16px" }}>热门作者榜单</h3>
          <Table
            columns={columns}
            dataSource={data}
            pagination={false}
            scroll={{ y: 300 }}
          />
        </div>
      </div>

      {/* 第三行图表 */}
      <div
        ref={chartRef5}
        style={{
          flex: "1",
          minHeight: "400px",
          background: "white",
          borderRadius: "8px",
          boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
          padding: "20px",
        }}
      ></div>
    </div>
  );
}

export default Index;
